<template>
    <div class="wrap">
        <van-sidebar v-model="activeKey" style="float: left;">
            <van-sidebar-item title="母婴用品"/>
            <van-sidebar-item title="女装正品"/>
            <van-sidebar-item title="标签名称"/>
        </van-sidebar>
        <section class="assort-cont">
            <router-link to="/goods">
                <img src="http://172.16.40.70/shop/images/classify-ph01.png">
            </router-link>
            <dl>
                <dt>宝宝营养</dt>
                <dd>
                    <a href="">
                        <img src="http://172.16.40.70/shop/images/classify-ph02.png">
                        <p>DNA</p>
                    </a>
                </dd>
                <dd>
                    <a href="#">
                        <img src="http://172.16.40.70/shop/images/classify-ph03.png">
                        <p>钙剂</p>
                    </a>
                </dd>
                <dd>
                    <a href="#">
                        <img src="http://172.16.40.70/shop/images/classify-ph02.png">
                        <p>DNA</p>
                    </a>
                </dd>
                <dd>
                    <a href="#">
                        <img src="http://172.16.40.70/shop/images/classify-ph03.png">
                        <p>钙剂</p>
                    </a>
                </dd>
            </dl>
            <dl>
                <dt>妈妈专区</dt>
                <dd>
                    <a href="#">
                        <img src="http://172.16.40.70/shop/images/classify-ph04.png">
                        <p>DNA</p>
                    </a>
                </dd>
                <dd>
                    <a href="#">
                        <img src="http://172.16.40.70/shop/images/classify-ph05.png">
                        <p>钙剂</p>
                    </a>
                </dd>
                <dd>
                    <a href="#">
                        <img src="http://172.16.40.70/shop/images/classify-ph04.png">
                        <p>DNA</p>
                    </a>
                </dd>
                <dd>
                    <a href="#">
                        <img src="http://172.16.40.70/shop/images/classify-ph05.png">
                        <p>钙剂</p>
                    </a>
                </dd>
            </dl>
        </section>
    </div>
</template>
<script>
	export default {
		data () {
			return {
				activeKey: 0
			}
		},
		created: function () {
			this.$emit('active', 'category')
		}
	}
</script>
<style scoped>
    .wrap {
        padding: 3rem 0 3.8rem;
        background: #ffffff;
        overflow: hidden;
    }

    .van-sidebar {
        width: 30%;
        position: fixed;
    }

    .van-sidebar-item--select {
        border-color: #FC605A;
    }

    .assort-cont {
        width: 69%;
        float: right;
        padding-top: 0.3rem;
    }

    .assort-cont img {
        width: 98%;
    }

    .assort-cont dl {
        width: 100%;
        margin-top: 5%;
        overflow: hidden;
    }

    .assort-cont dl dt {
        font-size: 0.9rem;
        color: #999;
        margin-bottom: 0.3rem;
    }

    .assort-cont dl dd {
        width: 5rem;
        height: 6rem;
        font-size: 0.8rem;
        float: left;
        margin-bottom: 0.3rem;
        margin-left: 0;
        margin-right: 0.39rem;
    }

    .assort-cont dl dd img {
        width: 100%;
    }

    .assort-cont dl dd a {
        width: 100%;
        display: block;
    }

    .assort-cont dl dd p {
        text-align: center;
        color: #666;
        font-size: 0.8rem;
        margin: 0;
    }

    /*.assort-cont dl dd:nth-child(even){margin-right: 0.5rem;}*/
    /*.assort-cont dl dd:nth-child(odd){margin-left: 0.3rem;}*/
</style>
